<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Google Maps JavaScript API Example</title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAADrcs8vXNXZ14GwtDIhCQVhSqwWsx0drCc_PIRGTEJzOB4avkxxQ_XRVeHa3abuibri6vaLMjzN0qOQ" type="text/javascript"></script>
        <script src="http://creative-territory.net/js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">

            //<![CDATA[
            var map = null;
            var xslt = null;
            function load(){
                map = new GMap(document.getElementById("map"));
                map.addControl(new GLargeMapControl());
                map.addControl(new GMapTypeControl());
                map.centerAndZoom(new GPoint(-96.591797, 38.203655), 13);

                var baseIcon = new GIcon();
                baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
                baseIcon.iconSize = new GSize(20, 34);
                baseIcon.shadowSize = new GSize(37, 34);
                baseIcon.iconAnchor = new GPoint(9, 34);
                baseIcon.infoWindowAnchor = new GPoint(9, 2);
                baseIcon.infoShadowAnchor = new GPoint(18, 25);

                var request = GXmlHttp.create();
                request.open("GET", "dealer.xsl");
                request.onreadystatechange = function(){
                    if(request.readyState == 4){
                        var xsltDoc = request.responseXML;
                        xslt = GXslt.create(xsltDoc);
                        loadXML(baseIcon);
                    }
                }
                request.send(null);

            }

            function loadXML(baseIcon){
                var request = GXmlHttp.create();
                request.open("GET", "mapdata.xml", true);
                request.onreadystatechange = function()
                {
                    if (request.readyState == 4)
                    {
                        var xmlDoc = request.responseXML;

                        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
                        var icons = xmlDoc.documentElement.getElementsByTagName("icon");
                        var info = xmlDoc.documentElement.getElementsByTagName("info");

                        for (var i = 0; i < markers.length; i++)
                        {
                            var point = new GPoint(parseFloat(markers[i].getAttribute("lng")), parseFloat(markers[i].getAttribute("lat")));
                            var marker = createMarker(point, icons[i], info[i], baseIcon);

                            map.addOverlay(marker);
                        }
                    }
                }
                request.send(null);
            }
            
            function createMarker(point, iconname, info, baseIcon){
                var icon = new GIcon(baseIcon);
                icon.image = iconname.getAttribute("image");
                var marker = new GMarker(point, icon);

                GEvent.addListener(marker, "click", function()
                {
                    var el = document.createElement('div');
                    xslt.transformToHtml(info, el);
                    marker.openInfoWindowHtml(el.innerHTML);
                });

                return marker;
            }


            function track(latlng){
                $("#__lat").text(latlng.lat());
                $("#__lng").text(latlng.lng());
            }

            function bounds(){
                var bounds = map.getBounds();
                var sw = bounds.getSouthWest();
                var ne = bounds.getNorthEast();
                $("#__lat_sw").text(sw.lat());
                $("#__lng_sw").text(sw.lng());
                $("#__lat_ne").text(ne.lat());
                $("#__lng_ne").text(ne.lng());
            }

            $(document).ready(function(){
                load();
                $("#go_button")[0].onclick = go_onclick;
                $("#add_button")[0].onclick = add_onclick;
            });

            function go_onclick(){
                if(map){
                    var _long = parseFloat($("#long_field").val());
                    var _latt = parseFloat($("#latt_field").val());
                    var _scale = parseInt($("#scale_field").val());
                    map.setZoom(_scale);
                    map.panTo(new GLatLng(_latt, _long));
                }
            }

            var counter = 0;
            function add_onclick(){
                if(map){
                    var _long = parseFloat($("#long_field").val());
                    var _latt = parseFloat($("#latt_field").val());
                    var point = new GLatLng(_latt, _long);
                    var marker = new GMarker(point);

                    GEvent.addListener(marker,"mouseover", function() {
                        var myHtml = "This is marker <b>#" + counter + "</b><br/>";
                        this.openInfoWindowHtml(myHtml);
                    });
                    GEvent.addListener(marker,"mouseout", function() {
                        this.closeInfoWindow();
                    });

                    counter++;
                    map.addOverlay(marker);
                }
            }

            //]]>
        </script>
    </head>
    <body onunload="GUnload()">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr><td><span id="__lat"></span> | <span id="__lng"></span></td><td></td></tr>
            <tr>
                <td colspan="2">
                    SouthWest (<span id="__lat_sw"></span> | <span id="__lng_sw">)</span><br/>
                    NorthEast (<span id="__lat_ne"></span> | <span id="__lng_ne">)</span>
                </td>
            </tr>
            <tr>
                <td><div id="map" style="width:800px;height:600px"></div></td>
                <td valign="top">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr><td>Lattitude</td><td><input id="latt_field" type="text" size="10" value="0"></input></td></tr>
                        <tr><td>Longitude</td><td><input id="long_field" type="text" size="10" value="0"></input></td></tr>
                        <tr><td>Scale</td><td><input id="scale_field" type="text" size="10" value="1"></input></td></tr>
                        <tr><td colspan="2" align="center">Goto location</td></tr>
                        <tr><td colspan="2" align="center"><input id="go_button" type="button" value="Go"/></td></tr>
                        <tr><td colspan="2" align="center">Add marker</td></tr>
                        <tr><td colspan="2" align="center"><input id="add_button" type="button" value="Add"/></td></tr>
                        <tr><td colspan="2" align="center">Clear all</td></tr>
                        <tr><td colspan="2" align="center"><input id="add_button" type="button" value="Clear all" onclick="map.clearOverlays();"/></td></tr>

                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>